<template>
  <div>
    <!--卡片视图区域-->
    <el-card>
      <el-row>
        <!--查询条件表单区域-->
        <el-form label-position="left" :inline="true" :model="queryForm">
          <el-form-item label="课程名称" size="small">
            <el-input v-model="queryForm.courseName" clearable placeholder="课程名称" size="small"></el-input>
          </el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
            <el-button type="success" @click="newCourseFormVisible = true" size="small">添加课程</el-button>
        </el-form>
      </el-row>
      <!--表格数据区域-->
      <el-row>
        <el-table :data="courseList" border stripe>
          <el-table-column prop="courseId" label="课程编号" width="80px"></el-table-column>
          <el-table-column prop="courseName" label="课程名称"></el-table-column>
          <el-table-column prop="courseType" label="课程类型" width="80px">
            <template v-slot:default="scope">
              <div v-if="scope.row.courseType === '1'">
                必修
              </div>
              <div v-if="scope.row.courseType === '2'">
                选修
              </div>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="截止时间"></el-table-column>
                    <el-table-column prop="canApply" label="能否申请">
                      <template v-slot:default="scope">
                        <div v-if="scope.row.canApply === undefined || scope.row.canApply === 1">
                          可申请
                        </div>
                        <div v-if="scope.row.canApply === 0">
                          不可申请
                        </div>
                      </template>
                    </el-table-column>-->
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                <el-button @click="editCourse(scope.row)" type="primary"
                           icon="el-icon-edit" size="small"></el-button>
                <!--                           :disabled="scope.row.canApply === 0"-->
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top"
                          :enterable="false">
                <el-button @click="deleteCourse(scope.row)" type="danger"
                           icon="el-icon-delete"
                           size="small"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <!--编辑课程对话框-->
    <el-dialog title="编辑课程" :visible.sync="editCourseFormVisible">
      <el-form ref="editCourseForm" :model="editCourseForm" :rules="courseFormRules">
        <el-form-item prop="courseId" size="small" label="课程编号" label-width="100px">
          <el-input disabled size="small" v-model="editCourseForm.courseId"></el-input>
        </el-form-item>
        <el-form-item prop="courseName" size="small" label="课程名称" label-width="100px">
          <el-input size="small" v-model="editCourseForm.courseName"></el-input>
        </el-form-item>
        <el-form-item size="small" label="课程类型" label-width="100px">
          <el-select size="" v-model="editCourseForm.courseType" placeholder="请选择课程类型">
            <el-option label="必修" value="1"></el-option>
            <el-option label="选修" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCourseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditCourse(editCourseForm)">确 定</el-button>
      </div>
    </el-dialog>

    <!--新建课程对话框-->
    <el-dialog title="新建课程" :visible.sync="newCourseFormVisible">
      <el-form ref="newCourseForm" :model="newCourseForm" :rules="courseFormRules">
        <el-form-item prop="courseId" size="small" label="课程编号" label-width="100px">
          <el-input size="small" v-model="newCourseForm.courseId"></el-input>
        </el-form-item>
        <el-form-item prop="courseName" size="small" label="课程名称" label-width="100px">
          <el-input size="small" v-model="newCourseForm.courseName"></el-input>
        </el-form-item>
        <el-form-item size="small" label="课程类型" label-width="100px">
          <el-select size="" v-model="newCourseForm.courseType" placeholder="请选择课程类型">
            <el-option label="必修" value="1"></el-option>
            <el-option label="选修" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newCourseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查询条件表单
      queryForm: {
        courseName: ''
      },
      courseList: [],
      // 编辑课程表单
      editCourseForm: '',
      editCourseFormVisible: false,
      // 添加课程表单
      newCourseForm: {
        courseId: '',
        courseName: '',
        courseType: ''
      },
      newCourseFormVisible: false,
      // 表单宽度
      formLabelWidth: '100px',
      // 课程表单规则校验
      courseFormRules: {
        courseId: [
          {
            required: true,
            message: '请输入课程编号',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ],
        courseName: [
          {
            required: true,
            message: '请课程名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getCourseList(this.queryForm.name)
  },
  methods: {
    async getCourseList (filter) {
      console.log(filter === '')
      // if (filter === null)
      const { data: res } = await this.$http.post('/queryCourseList', this.queryForm)
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) {
        this.$message.error('获取课程信息失败')
      } else {
        const courseList = res.data
        this.courseList = courseList.courses
        this.total = courseList.total
        // console.log(courseList)
      }
    },
    onSubmit () {
      console.log(this.queryForm.name)
      this.getCourseList(this.queryForm.name)
    },
    addCourse () {
      // console.log(this.newCourseForm)
      this.$refs.newCourseForm.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/addCourse', this.newCourseForm)
          .catch((error) => {
            console.log(error)
          })
        if (res.status !== 200) {
          this.$message.error('添加课程失败,' + res.data.msg)
        } else {
          this.$message.success('添加课程成功')
          this.newCourseFormVisible = false
          await this.getCourseList()
        }
      })
    },
    async deleteCourse (course) {
      const flag = await this.$confirm('确认要删除吗？')
      if (flag) {
        // console.log(course)
        const { data: res } = await this.$http.post('/deleteCourse', course)
          .catch((error) => {
            console.log(error)
            this.$message.error('删除课程失败,请检查网络')
          })
        if (res.status === 200) {
          this.$message.success('删除课程成功')
          await this.getCourseList()
        } else {
          this.$message.error('删除课程失败,' + res.data.msg)
        }
      }
    },
    editCourse (row) {
      this.editCourseFormVisible = true
      // console.log(row)
      this.editCourseForm = row
    },
    submitEditCourse (course) {
      console.log(course)
      this.$refs.editCourseForm.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/editCourse', course)
          .catch((error) => {
            console.log(error)
          })
        if (res.status !== 200) {
          this.$message.error('更新课程失败,' + res.data.msg)
        } else {
          this.$message.success('更新课程成功')
          this.editCourseFormVisible = false
          await this.getCourseList()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
